<template>
    <div class="one">
        <el-button>
            {{dateFormat(newDate)}}
        </el-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            newDate : new Date()
        }
    },
        // created( ) 与 mounted( )的区别就是：21212123
        // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
        // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
    // 挂载时间
    mounted () {
        let that = this
        this.timer = setInterval(function () {
            that.newDate = new Date().toLocaleString()
        },0)
    },
// 销毁时清除定时器
    beforeDestroy: function () {
        if (this.timer) {
            clearInterval(this.timer)
        }
    },
    methods : {
        dateFormat () {
    	var date = new Date()
        var year = date.getFullYear()
        var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
        var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        let week = date.getDay() // 星期
        let weekArr = [ '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六' ]
        return year + '年' + month + '月' + day + '日 ' + hours + ':' + minutes + ':' + seconds + ' ' + weekArr[week]
        }
    }
}
</script>

<style scoped>
.one{
    display: flex;
    justify-content: center;
}
.el-button{
    margin: 0,auto;
    font-size: 20px;
    color: skyblue;
}
</style>